<template>
	<!-- <view class="container"></view> -->
	
	<button class="button">Hover me</button>
	
</template>

<script setup>
	
</script>

<style lang="scss" scoped>
	/* From Uiverse.io by mihocsaszilard */ 
	/* From Uiverse.io by muhammad_1180 */ 
	.container {
	  position: absolute;
	  inset: 0;
	  width: 100%;
	  height: 100%;
	  background: white;
	  background: radial-gradient(125% 125% at 50% 10%, #fff 40%, #63e 100%);
	  z-index: -10;
	}
	.button {
		  padding: 1em 2em;
		  border: none;
		  border-radius: 5px;
		  font-weight: bold;
		  letter-spacing: 5px;
		  text-transform: uppercase;
		  cursor: pointer;
		  color: #2c9caf;
		  transition: all 1000ms;
		  font-size: 15px;
		  position: relative;
		  overflow: hidden;
		  outline: 2px solid #2c9caf;
		}
		
		button:hover {
		  color: #ffffff;
		  transform: scale(1.1);
		  outline: 2px solid #70bdca;
		  box-shadow: 4px 5px 17px -4px #268391;
		}
		
		button::before {
		  content: "";
		  position: absolute;
		  left: -50px;
		  top: 0;
		  width: 0;
		  height: 100%;
		  background-color: #2c9caf;
		  transform: skewX(45deg);
		  z-index: -1;
		  transition: width 1000ms;
		}
		
		button:hover::before {
		  width: 250%;
		}


</style>
